<template>
  <view style="display: flex;flex-direction: column;align-items: center;">
    <view class="head" :style="headStyle">
      
    </view>
    <view class="WasteInfo">
      <view class="wasteDETAIL">
        <view class="wasteTitle">
          {{wasteMsg.title}}
        </view>
        <view class="wasteContent">
          {{wasteMsg.content}}
        </view>
        <view class="wasteImg">
          <image :src="wasteMsg.imgSrc" mode="aspectFit"></image>
        </view>
      </view>
	  <view class="usualfont">
	  	{{wasteMsg.title}}
	  	<hr />
	  </view>
	  
      <view class="wasteList">
        <view class="wasteList-item" v-for="(item,index) in wasteMsg.typeList" :key="index" @click="navigateToDetail(item)">
          <view class="wasteList-item-left">
            <img :src="item.imgSrc" alt="" style="flex-grow: 1;" />
            <view style="flex-grow: 12;">{{item.name}}</view>
          <view class=""><img src="/static/more.png" alt="" style="height: 40rpx;width: 40rpx;flex-grow: 1;"/></view>
			</view>
			<hr style="height: 0.1rpx;margin: 20rpx 10rpx;"/>
        </view>
      </view>
	  
    </view>
  </view>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive } from "vue"

let headStyle = reactive({
  "background-color": "blue"
})

let wasteMsg = reactive({
  'title': null as string | null,
  'content': null as string | null,
  'imgSrc': null as string | null,
  'typeList': [] as Array<{ name: string, imgSrc: string, type: string }>
})

onMounted(() => {
  console.log(getCurrentInstance()?.attrs)
  const instance = getCurrentInstance()?.proxy
  if (instance) {
    const eventChannel = instance.getOpenerEventChannel();
    headStyle["background-color"] = getCurrentInstance()?.attrs["background-color"] as string
    wasteMsg.title = getCurrentInstance()?.attrs.title as string
    uni.setNavigationBarTitle({
      title: wasteMsg.title || ''
    })
    eventChannel.on("WasteInfoFunc", function(data: { data: typeof wasteMsg }) {
      wasteMsg.content = data.data.content
      wasteMsg.imgSrc = data.data.imgSrc
      wasteMsg.typeList = data.data.typeList
    })
	var utterThis = new window.SpeechSynthesisUtterance(wasteMsg.title);
	window.speechSynthesis.speak(utterThis);
  }
})

function navigateToDetail(item: { name: string, imgSrc: string, type: string }) {
  uni.navigateTo({
    url: `/pages/waste-detail2/waste-detail2?type=${item.type}&color=${encodeURIComponent(headStyle["background-color"])}&title=${encodeURIComponent(item.name)}`,
    success: (res) => {
      // We don't need to use the event channel here as we're passing data via URL parameters
    }
  })
}

</script>

<style>
.head {
  width: 100%;
  height: 400rpx;
}
.WasteInfo {
  width: 80vw;
  padding: 24rpx;
  background-color: lightblue;
  position: absolute;
  top: 100rpx;
  border-radius: 20rpx;
}
.wasteDETAIL {
  background-color: white;
  padding: 20rpx;
  border-radius: 30rpx;
  font-size: 40rpx;
}
.wasteTitle {
  font-size: 60rpx;
  font-weight: 800;
  margin-bottom: 90rpx;
  
}
.wasteImg image {
  width: 165rpx;
  height: 120px;
}
.wasteImg {
  position: absolute;
  top: -20rpx;
  right: 60rpx;
}
.wasteList-item img {
  width: 60rpx;
  height: 70rpx;
}
.wasteList-item {

  padding: 10rpx;
  margin-top: 10rpx;
  justify-content: space-between;
  align-items: center;

}
.wasteList-item-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 55rpx;
	width: 100%;
}
.wasteList-item-left img {
  margin-right: 20rpx;
}
	.usualfont{
		font-size: 40rpx;
		font-weight: 800;
		margin: 20rpx;
	}
	.usualfont hr{
		margin: 20rpx 4rpx;
		width: 17%;
		background-color: lawngreen;
		height: 4rpx;
		border-style: none;
	}

</style>